<template>
    <div class="message-list-container">
        <div class="search">
            <Search />
        </div>

        <a-list item-layout="horizontal" :data-source="friendList" :split="false">

            <template #renderItem="{ item }">
                <a-list-item class="a-list-item" @click="goToChitchat(item.other_user_id)">
                    <template #actions>
                        <span style="font-size: 12px">{{ item.create_at.slice(5, 10) }}</span>
                    </template>
                    <a-list-item-meta description="">
                        <template #title>
                            <span style="position: relative; top: 6px; font-size: 14px; white-space: nowrap;"
                                @click="goToDetail(item.other_user_id)">{{ item.other_user_nickname }}</span>
                        </template>
                        <template #avatar>
                            <a-avatar shape="square" :src="baseURL + item.other_user_avatar" />
                        </template>
                    </a-list-item-meta>
                </a-list-item>
            </template>
        </a-list>

        <a-list v-show="groupList.length > 0" item-layout="horizontal" :data-source="groupList" :split="false">
            <template #renderItem="{ item }">
                <a-list-item class="a-list-item" :title="item.name" @click="goToGroupchat(item, item.members.length)">
                    <template #actions>
                        <span style="font-size: 12px"></span>
                    </template>
                    <a-list-item-meta description="">
                        <template #title>
                            <span class="title">{{ item.name }}</span>
                        </template>
                        <template #avatar>
                            <a-avatar shape="square" :src="baseURL + item.cover" />
                        </template>
                    </a-list-item-meta>
                </a-list-item>
            </template>
        </a-list>
    </div>
</template>
<script setup>
import Search from '@/views/main/component/Search.vue'
import { FriendShipList_API } from '@/api/friendship.js'
import { GroupAdded_API } from '@/api/groupchat.js'
import { ref, onMounted, inject } from 'vue'
import { useRouter } from 'vue-router'
import { notification } from 'ant-design-vue'

const baseURL = import.meta.env.VITE_API_BASE_URL
const socket = inject('socket')
const router = useRouter()

const friendList = ref([])
const groupList = ref([])

const friendshipList = async () => {
    const { data: res } = await FriendShipList_API(1)
    friendList.value = res.data
}

const groupAdded = async () => {
    const { data: res } = await GroupAdded_API(1)
    groupList.value = res.data
}

const goToChitchat = (id) => {
    router.push({
        path: '/main/chitchat',
        query: {
            tid: id
        }
    })
}

const goToGroupchat = (item, total) => {
    router.push({
        path: '/main/groupchat',
        query: {
            id: item.id,
            name: item.name,
            members: JSON.stringify(item.members),
            total
        }
    })
}

onMounted(() => {
    friendshipList()
    groupAdded()
    socket.on('friendship update notification', () => {
        friendshipList()
    })
    socket.on('groupData-synchronization', () => {
        notification.success({
            key: 'groupData-synchronization',
            message: '群聊提醒',
            description: '有新的群聊消息'
        })
        groupAdded()
    })
})
</script>

<style scoped>
.message-list-container {
    overflow-y: scroll;
    scrollbar-width: none;
    user-select: none;
    border-right: 1px solid #e0e0e0;
}

.message-list-container:hover {
    scrollbar-width: auto;
}

.search {
    width: 100%;
    height: 80px;
    background-color: #F7F7F7;
    position: sticky;
    top: 0;
    z-index: 100;
}

.ant-list-item {
    transition: filter 0.2s ease;
}

.a-list-item:hover {
    background-color: #E6E4E4;
    cursor: pointer;
}

.title {
    font-size: 14px;
    display: inline-block;
    width: 150px;
    overflow: hidden;
    /* 内容超出后隐藏 */
    text-overflow: ellipsis;
    /* 超出内容显示为省略号 */
    white-space: nowrap;
    /* 文本不进行换行 */
    position: relative;
    top: 6px;
}
</style>